/**
 * @description  券池审批
 * @author shenhong
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { PlusCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Tooltip } from 'antd';
import style from './index.less';
import RowForm2 from './rowForm2';
import uuid from 'es6-uuid';
@Form.create()
class ColRender2 extends PureComponent {
  constructor() {
    super();

    this.state = {
      value: undefined,
      rowData: [],
      rowData2: [],
      isError3: false, //子条目有数据未填
    };
  }
  componentDidMount() {
    const { defaultData } = this.props;
    this.props.onRef(this);
    this.setState(
      {
        rowData2: [],
      },
      () => {
        this.setState({
          rowData2: defaultData,
        });
      },
    );
  }
  //券池名称改变时恢复标的信息数据
  changePoolName = () => {
    this.setState({
      rowData: [],
      rowData2: [],
    });
  };
  // 标题栏组件
  topRender = () => {
    const labels = [
      { name: '生效方式', required: true, visible: true },
      { name: '维度', required: true, visible: true },
      { name: '符号', required: true, visible: true },
      { name: '内容', required: true, visible: true },
      { name: '生效时间', required: true, visible: true },
      { name: '失效时间', required: true, visible: true },
      { name: '标签', required: false, visible: true },
      { name: '操作', required: false, visible: true },
    ];
    const arr = labels.filter((item) => item.visible == true); //过滤出展示的列数
    this.setState({
      colsNum: arr.length,
    });
    const width = parseFloat(95 / (arr.length - 1)) + '%';
    return (
      <div className={style.secRow}>
        {labels.map((item, key) => {
          return item.visible ? (
            <div style={{ width: item.name == '操作' ? '48px' : width, textAlign: item.name == '操作' ? 'center' : 'inherit' }} key={key}>
              <i style={{ visibility: item.name == '符号' ? 'visible' : 'hidden' }}>{item.name == '符号' ? '条目规则' : '占位符'}</i>
              <span>
                <label className={item.required ? style.lableRequire : ''}></label>
                {item.name == '生效方式' ? (
                  <span>
                    {'生效方式'}
                    <Tooltip title={'联合是指多个条目规则以并且关系联合生效'}>
                      <QuestionCircleOutlined style={{ paddingLeft: '7px', display: 'inline-block' }} />
                    </Tooltip>
                  </span>
                ) : (
                  item.name
                )}
              </span>
            </div>
          ) : null;
        })}
      </div>
    );
  };

  // 点击取消重置表单的默认值
  handleReset = () => {
    const { type, defaultData } = this.props;
    if (type == 'add') {
      this.setState({
        rowData: [],
      });
    } else {
      this.setState({
        rowData2: defaultData,
      });
    }
  };

  // 新增行
  addRow = () => {
    const { type } = this.props;
    let rowData = this.state.rowData || [];
    let rowData2 = this.state.rowData2 || [];
    if (type == 'add') {
      rowData.push({ rowId: uuid(32) });
      this.setState({
        rowData: [...rowData],
      });
    } else {
      rowData2.push({ id: uuid(32) });
      this.setState({
        rowData2: [...rowData2],
      });
    }
  };
  // 删除
  delOneRow = (e) => {
    const { rowData, rowData2 } = this.state;
    const { type } = this.props;
    let newDate = type == 'add' ? this.state.rowData.filter((item) => item.rowId != e) : this.state.rowData2.filter((item) => item.id != e);
    if (type == 'add') {
      this.setState({
        rowData: newDate,
        isError: false,
      });
    } else {
      this.setState({
        rowData2: newDate,
        isError: false,
      });
    }
  };

  // 获取一行数据
  getData2 = () => {
    const { rowData, rowData2 } = this.state;
    const { type } = this.props;
    let resArr = [];
    if (type == 'add') {
      for (let i in rowData) {
        const datas = rowData[i].ref.getData2();
        if (datas == undefined) {
          return;
        }
        resArr.push(datas);
      }
    } else {
      for (let i in rowData2) {
        const datas = rowData2[i].ref.getData2();
        resArr.push(datas);
        if (datas == undefined) {
          return;
        }
      }
    }
    return resArr;
  };
  isError3OnChange = (e) => {
    this.setState({ isError3: e });
  };
  render() {
    const { rowData, rowData2, isError3 } = this.state;
    const { type, isDisabled, isError2, defaultData, poolType, tagData, isOver, selectData } = this.props;
    return (
      <div>
        {this.topRender()}
        {type == 'add'
          ? rowData && rowData.length
            ? rowData.map((item, index) => {
                return (
                  <RowForm2
                    rowId={item.rowId}
                    key={item.rowId}
                    colsNum={this.state.colsNum}
                    selectData={selectData}
                    onDelete={this.delOneRow}
                    tagData={tagData}
                    poolType={poolType}
                    isDisabled={isDisabled}
                    type={type}
                    onRef={(ref) => {
                      item.ref = ref;
                    }}
                    isError3OnChange={this.isError3OnChange}
                  />
                );
              })
            : null
          : rowData2 && rowData2.length
          ? rowData2.map((item, index) => {
              return (
                <RowForm2
                  rowId={item.id}
                  key={item.id}
                  colsNum={this.state.colsNum}
                  selectData={selectData}
                  defaultData={item}
                  onDelete={this.delOneRow}
                  tagData={tagData}
                  poolType={poolType}
                  isDisabled={isDisabled}
                  type={type}
                  onRef={(ref) => {
                    item.ref = ref;
                  }}
                  isError3OnChange={this.isError3OnChange}
                />
              );
            })
          : null}

        {poolType ? (
          type == 'see' ? null : (
            <div className='icon_s' style={{ marginLeft: '20px', marginTop: '10px' }}>
              <a onClick={this.addRow}>
                <PlusCircleOutlined />
              </a>
              {isError2 || isError3 ? (
                <span style={{ color: 'red', marginLeft: '20px' }}>请填写完整的条目要素信息</span>
              ) : isOver ? (
                <span style={{ color: 'red', marginLeft: '20px' }}>失效时间不得早于生效时间/今天</span>
              ) : null}
            </div>
          )
        ) : null}
      </div>
    );
  }
}

export default connect(({}) => ({}))(ColRender2);
